<template>
    <div>
        <div v-show="isShow"><h4>管理已有收货地址</h4></div>

        <div  class="now-addressee" v-show="$store.state.lognUser.address.length > 0 && isShow">
<!--            <div>{{ $store.state.lognUser.address }}</div>-->
            <table>
                <thead>
                <tr>
                    <td class="address-name">姓名</td>
                    <td class="address-tel">联系方式</td>
                    <td class="address-city">联系地址</td>
                    <td class="address-operation">操作</td>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item, index) in $store.state.lognUser.address" :key="index">
                    <td> {{ item.name }} </td>
                    <td> {{ item.tel }} </td>
                    <td>
                        <span>
                            {{ item.city}}
                        </span>
                        <span>
                            {{ item.detailed }}
                        </span>
                    </td>
                    <td><a href="javascript:void(0)" class="cz" @click="changeAdress(index)">编辑</a><a href="javascript:void(0)" class="cz" @click="deleAddress(index)">删除</a></td>
                </tr>
                </tbody>
            </table>
        </div>
        <div v-show="isShow"><h4>新增地址</h4></div>
<!--        <div v-if="$store.state.lognUser.address.length >=5 ">地址目前仅可保存5条！</div>-->
        <div v-show="isShow" class="new-addressee">
            <div><span>收货人姓名:</span>
                <el-input
                        style="width: 200px"
                    placeholder="请输入内容"
                    v-model="addressee.name">
            </el-input>
            </div>
            <div><span>联系电话:</span><el-input
                    style="width: 200px"
                    placeholder="请输入内容"
                    v-model="addressee.tel">
            </el-input></div>
            <div>
                <span>联系地址:</span>
                <el-cascader
                        size="large"
                        :options="options"
                        v-model="selectedOptions"
                        @change="handleChange"

                >
                </el-cascader>

            </div>
            <div>
                <span>详情地址:</span>
                    <el-input
                            style="width: 400px"
                            placeholder="请输入内容"
                            v-model="addressee.detailed"
                    >
                    </el-input>
                </div>

            <div><button class="btn" @click="submitAdress" >保存收货地址</button></div>

        </div>
        <div v-show="!isShow"><h4>修改地址</h4></div>
        <div v-show="!isShow" class="new-addressee">
            <div><span>收货人姓名:</span>
                <el-input
                        style="width: 200px"
                        placeholder="请输入内容"
                        v-model="changeAddressee.name">
                </el-input>
            </div>
            <div><span>联系电话:</span><el-input
                    style="width: 200px"
                    placeholder="请输入内容"
                    v-model="changeAddressee.tel">
            </el-input></div>
            <div>
                <span>联系地址:</span>
                <el-cascader
                        size="large"
                        :options="options"
                        v-model="selectedOptions"
                        @change="handleChange"

                >
                </el-cascader>

            </div>
            <div>
                <span>详情地址:</span>
                <el-input
                        style="width: 400px"
                        placeholder="请输入内容"
                        v-model="changeAddressee.detailed"
                >
                </el-input>
            </div>

            <div><button class="btn" @click="submitChangeAddress">保存收货地址</button></div>

        </div>

    </div>
</template>

<script>
    import { regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
    import { sendwithget, sendwithpost } from "@/network/profile";

    export default {
        name: "adress",
        data () {
            return {
                addressee: {
                  name: '',
                  tel: '',
                  detailed: '',
                  city: [],
                  city_code: [],
                },
                changeAddressee: {},
                options: regionDataPlus,
                selectedOptions: [""],
                isShow: true,
                importIndex: null,
                isSub: false
            }
        },
        computed: {

        },
        mounted() {
        },
        methods: {
            handleChange (arr) {
                if (this.isShow) {
                    this.addressee.city_code = arr;
                    this.addressee.city = CodeToText[arr[0]] + CodeToText[arr[1]] +  CodeToText[arr[2]]
                    console.log(arr);
                } else {
                    this.changeAddressee.city_code = arr;
                    this.changeAddressee.city = CodeToText[arr[0]] + CodeToText[arr[1]] +  CodeToText[arr[2]]
                }
            },
            submitAdress() {
                sendwithget({
                    url: '/receivingaddress',
                    data: this.addressee
                }).then(res=>{
                    if (res.data.res_code != 2) {
                        alert(res.data.message)
                    }else {
                        this.$store.commit('addAddress', this.addressee);
                        this.addressee = {};

                    }
                })

            },
            changeAdress(index) {
                this.importIndex = index
                this.changeAddressee = JSON.parse(JSON.stringify(this.$store.state.lognUser.address[index]));
                console.log(this.changeAddressee);
                this.selectedOptions = this.changeAddressee.city_code
                this.isShow = !this.isShow
            },
            submitChangeAddress() {
                sendwithpost({
                    url: '/changeaddress',
                    data: {
                        data: this.changeAddressee,
                        index: this.importIndex
                    }
                }).then(res=> {
                    if(res.data.res_code != 2) {
                        alert('服务器繁忙，请稍后重试！')
                    }else {
                        this.$store.commit('changeAddress', {
                            data: this.changeAddressee,
                            index: this.importIndex
                        })
                        this.isShow = !this.isShow
                    }
                })
            },
            deleAddress(index) {
                sendwithget({
                    url: '/deleaddress',
                    data: index
                }).then(res=>{
                    if (res.data.res_code != 2) {
                        alert(res.data.message)
                    } else {
                        this.$store.commit('deleAddress', {
                            index: index
                        })
                    }
                })
            },

        },

    }
</script>

<style scoped>
    table {
        margin: 0;
        padding: 0;
    }
    tr {
        background-color: #f5f5f5;
        height: 20px;
        text-indent: 2em;
    }
    thead {
        font-size: 14px;
        font-weight: bold;
    }
    tbody tr {
        font-size: 12px;
        background-color: #ffffff;

    }
    .address-name {
        width: 85px;
    }
    .address-tel {
        width: 138px;
    }
    .address-city {
        width: 423px;
    }
    .address-operation {
        width: 87px;
    }
    .cz {
        margin: 0 3px;
    }
/*
    已存在地址样式结束
*/

    .now-addressee {
        margin: 20px 20px 100px;
    }
    .new-addressee {
        margin: 20px 30px;
    }
   .new-addressee div{
       display: flex;
       margin: 5px;

   }
   .new-addressee div span {
       width: 100px;
        line-height: 40px;
       text-align: right;
       font-size: 13px;
       font-weight: bold;
   }
 .btn {
     border: none;
     background-color: #000000;
     color: #ffffff;
     display: block;
     height: 30px;
     line-height: 30px;
     font-size: 15px;
     margin: 30px 130px;
 }
    .btn:hover, .cz:hover {
        background-color: rgba(255, 69, 0, 0.9);

    }


</style>